let id = window.location.search.substr(4);
// console.log(id)
ajax({
    url:"php/myid.php",
    data:{
        id
    },
    dataType:"json",
}).then(res=>{
    // console.log(res)
    Dom(res)
    addCart()
})

let countEle = document.querySelector(".count")
function Dom(data){
    countEle.innerHTML=`<div class="box">
    <div class="show">
      <img src="./${data.img}" alt="" />
      <div class="mask"></div>
    </div>
    <div class="list">
      <p class="active">
        <img
          src="./${data.img}"
          showImg="${data.img}"
          enlargeImg="${data.img}"
          alt=""
        />
      </p>
      <p>
        <img
          src="${data.img2}"
          showImg="${data.img2}"
          enlargeImg="${data.img2}"
          alt=""
        />
      </p>
    </div>
   
    <div class="enlarge"></div>
  </div>
  <div class="right">
    <h2>${data.pname}</h2>
    <p>￥${data.price}</p>
    <div class="end">加入购物车</div>
</div>`;



//放大镜
function Enlarge(containerEle) {
  this.showEle = containerEle.querySelector(".show");
  this.maskEle = containerEle.querySelector(".mask");
  this.enlargeEle = containerEle.querySelector(".enlarge");
  this.pEle = containerEle.querySelectorAll(".list p");
  this.enterOrLeave()
  this.moveFn()
  this.switchPic()
}
//移入移除方法
Enlarge.prototype.enterOrLeave=function(){
  this.showEle.onmouseenter = () => {
    this.maskEle.style.display = "block";
    this.enlargeEle.style.display = "block";
};
this.showEle.onmouseleave = () => {
  this.maskEle.style.display = "none";
  this.enlargeEle.style.display = "none";
};
}

// //移动方法
Enlarge.prototype.moveFn=function(){
  this.showEle.onmousemove = (e) => {
  let x = e.pageX - this.maskEle.offsetWidth / 2 - boxEle.offsetLeft;
  // console.log(e.clientX)
  let y = e.pageY - this.maskEle.offsetHeight / 2 - boxEle.offsetTop;
  x < 0 ? (x = 0) : (x = x);
  y < 0 ? (y = 0) : (y = y);
  let xx = this.showEle.offsetWidth - this.maskEle.offsetWidth;
  let yy = this.showEle.offsetHeight - this.maskEle.offsetHeight;
  x > xx ? (x = xx) : (x = x);
  y > yy ? (y = yy) : (y = y);
  this.maskEle.style.left = x + "px";
  this.maskEle.style.top = y + "px";
  let bgSize = getComputedStyle(this.enlargeEle)["background-size"];
  let arr = bgSize.split(" ");
  let bgwidth = parseInt(arr[0]);
  let bgheight = parseInt(arr[1]);
  this.enlargeEle.style.backgroundPosition = `${
    -x * (bgwidth / this.showEle.offsetWidth)
  }px ${-y * (bgheight / this.showEle.offsetHeight)}px`;
};
}

//切换小图方法
Enlarge.prototype.switchPic=function(){
  this.pEle.forEach((item, key) => {
  item.onmouseenter = () => {
    this.pEle.forEach((item) => {
      item.classList.remove("active");
    });
    if(key==0){
      this.showEle.querySelector("img").src = `${data.img}`;
    this.enlargeEle.style.backgroundImage= `url(${data.img})`;
    }else if(key==1){
      this.showEle.querySelector("img").src = `${data.img2}`;
    this.enlargeEle.style.backgroundImage= `url(${data.img2})`;
    }
    
    item.classList.add("active");
  };
});

}

let boxEle = document.querySelector(".box");
 new Enlarge(boxEle)


 
 }

// 1.显示登录人员的欢迎信息  2.校验用户是否登录
let isHaveUid = getCookie("uid");
// console.log(isHaveUid)
		let showNameEle = document.querySelector(".showName");
		if(typeof isHaveUid != "undefined"){
			// 登录了；显示用户名 
			let username = getCookie("username");
			showNameEle.innerHTML = `${username} 欢迎您`;
		}

  function addCart(){
    let endEle = document.querySelector(".end");
 endEle.onclick = function(){
  ajax({
    url:"./php/addCart.php",
    data:{
      pid:id,
      uid:isHaveUid,
      num:1
    },
    dataType:"json",
    method:"post",
  }).then(res=>{
    // console.log(res)
    alert("添加成功")
  })
 }
  }
 